// 博客管理组件
import { truncateText } from '../modules/utils.js';

const postManagementComponent = {
    template: `<div class="container">
        <h2>博客管理</h2>
        <div class="post-form">
            <h3>添加新文章</h3>
            <div class="form-group">
                <label>标题</label>
                <input type="text" v-model="newPost.title" placeholder="输入文章标题">
            </div>
            <div class="form-group">
                <label>作者</label>
                <input type="text" v-model="newPost.author" placeholder="输入作者名">
            </div>
            <div class="form-group">
                <label>分类</label>
                <select v-model="newPost.categoryId">
                    <option value="">选择分类</option>
                    <option v-for="category in categories" :key="category.id" :value="category.id">
                        {{ category.name }}
                    </option>
                </select>
            </div>
            <div class="form-group">
                <label>内容</label>
                <textarea v-model="newPost.content" placeholder="输入文章内容"></textarea>
            </div>
            <button class="btn" @click="addPost">发布文章</button>
        </div>

        <div class="search-box">
            <input type="text" v-model="searchTerm" placeholder="搜索文章..." @input="filterPosts">
        </div>

        <div class="post-list-container">
            <div class="post-list">
                <div class="post-item" v-for="post in filteredPosts" :key="post.id">
                    <div class="post-details">
                        <h3 class="post-title">{{ post.title }}</h3>
                        <div class="post-meta">
                            作者: {{ post.author }} | {{ formatDate(post.createdAt) }}
                        </div>
                        <div class="post-excerpt">{{ truncateText(post.content, 150) }}</div>
                        <div class="post-category" v-if="getCategoryName(post.categoryId)">
                            分类: {{ getCategoryName(post.categoryId) }}
                        </div>
                    </div>
                    <div class="post-actions">
                        <button class="btn btn-info" @click="viewPost(post)">查看</button>
                        <button class="btn btn-danger" @click="deletePost(post.id)">删除</button>
                    </div>
                </div>
                <div v-if="filteredPosts.length === 0" class="loading">没有找到文章</div>
            </div>
        </div>
    </div>`,
    props: ['appModule'],
    data() {
        return {
            newPost: { title: '', author: '', categoryId: '', content: '' },
            searchTerm: ''
        };
    },
    computed: {
        categories() {
            return this.appModule && this.appModule.categoryModule ?
                this.appModule.categoryModule.categories : [];
        },
        filteredPosts() {
            return this.appModule ? this.appModule.getFilteredPosts() : [];
        }
    },
    methods: {
        truncateText,
        addPost() {
            if (!this.newPost.title || !this.newPost.author || !this.newPost.content) {
                alert('请填写标题、作者和内容');
                return;
            }

            if (this.appModule && this.appModule.postModule) {
                this.appModule.postModule.addPost(
                    this.newPost.title,
                    this.newPost.content,
                    this.newPost.author,
                    this.newPost.categoryId || null
                );
                this.newPost = { title: '', author: '', categoryId: '', content: '' };
            }
        },
        deletePost(postId) {
            if (confirm('确定要删除该文章吗？')) {
                if (this.appModule && this.appModule.postModule) {
                    this.appModule.postModule.deletePost(postId);
                }
            }
        },
        viewPost(post) {
            if (this.appModule && this.appModule.postModule) {
                this.appModule.postModule.selectPost(post);
            }
        },
        getCategoryName(categoryId) {
            if (!categoryId || !this.appModule || !this.appModule.categoryModule) return '';

            const category = this.appModule.categoryModule.categories.find(c => c.id === categoryId);
            return category ? category.name : '';
        },
        formatDate(date) {
            return date ? new Date(date).toLocaleDateString() : '';
        },
        filterPosts() {
            if (this.appModule) {
                this.appModule.state.postSearch = this.searchTerm;
            }
        }
    }
};

export { postManagementComponent };